<template>
  <div class="detail" @mousewheel='change' :class="isShow ? 'bgc-night' : 'bgc-sun'">
    <div class="img-box">
      <img :src="detail.image" alt="" />
      <div class="title">{{ detail.title }}</div>
    </div>
    <div v-html="detail.body"></div>
          <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"

/>
<div class="translate" @click="move"><van-icon :name="isBottom?'arrow-up':'arrow-down'" size="30" color="black"/></div>
    <!-- 底部状态栏 -->
    <div class="bottom">
      <div class="left-arrow" @click="goToIndex">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="comments" @click="goToComment">
        <van-icon name="comment-o" size="20" :badge="extra.comments" />
      </div>
      <div class="popularity"  @click="like"><van-icon :name="isLike?'good-job':'good-job-o'" :color="isLike?'#37bafa':'black'"  size="20" :badge="isLike?extra.popularity+1:extra.popularity"/></div>
      <div class="collection" @click="star"><van-icon :name="isStar?'star':'star-o'" :color="isStar?'#37bafa':'black'" size="20" /></div>
      <div class="share" @click="share"><van-icon name="share-o" size="20" /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      detail: [],
      storyid: localStorage.getItem("storyid"),
      isShow: localStorage.getItem("theme") === "true" ? true : false,
      extra: [],
      showShare:false,
      isStar:"",
      isLike:"",
      isBottom:"",
      options: [
        [
          { name: '微信好友', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '新浪微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },
  created() {
    this.getDetail();
    this.getExtra();
    this.isStar = localStorage.getItem(this.storyid+"comments") =="true" ? true :false;
    this.isLike = localStorage.getItem(this.storyid+"like") =="true" ? true :false;
  },
  updated() {
    if(document.getElementsByClassName("author").length!=0){
      var a = document.getElementsByClassName("author")[0].innerHTML;
      document.getElementsByClassName("author")[0].innerHTML = a.split("，")[0];
    }
    if (document.getElementsByClassName("originUrl").length != 0)
      document.getElementsByClassName("originUrl")[0].innerHTML =
        "进入「知乎」查看原文";
    var b = (document.getElementsByClassName(
      "view-more"
    )[0].childNodes[0].innerHTML = "进入「知乎」查看相关讨论");
    // console.log(b);
  },
  methods: {
    goToIndex() {
      this.$router.go(-1);
    },
    goToComment() {
      this.$router.push({name:"Comments"});
    },
    star(){
      this.isStar=!(this.isStar);
      localStorage.setItem(this.storyid+"comments",this.isStar);
    },
    like(){
      this.isLike=!(this.isLike);
      localStorage.setItem(this.storyid+"like",this.isLike);
    },
    share(){
      this.showShare = true;
    },
    move(){
      if(this.isBottom == true){
        document.documentElement.scrollTop = 0;
        this.isBottom = false;
      }
      else{
       document.documentElement.scrollTop = document.body.scrollHeight; 
       this.isBottom = true;
      }
    },
    change(){
      if(document.documentElement.scrollTop + document.documentElement.clientHeight
      >=(document.body.scrollHeight)*0.8){
        // console.log("在底端");
        this.isBottom = true;
      }
      else{
        // console.log("不在底部");
        this.isBottom = false;
      }
    },
    getDetail() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/zhihudaily/story/" + this.storyid,
      }).then((res) => {
        // console.log(res.data.story);
        this.detail = res.data.story;
      });
    },
    getExtra() {
      this.axios({
        method: "GET",
        url:
          "https://apis.netstart.cn/zhihudaily/story/" +
          this.storyid +
          "/extra",
      }).then((res) => {
        // console.log(res.data);
        this.extra = res.data;
      });
    },
  },
};
</script>

<style lang="postcss" scoped>
@import url("http://news-at.zhihu.com/css/news_qa.auto.css?v=4b3e3");
.detail {
  position: relative;
}
.detail img:nth-child(1) {
  width: 100%;
  height: 300px;
}
.img-box {
  position: relative;
}
.title {
  position: absolute;
  bottom: 10%;
  left: 5%;
  font-size: 20px;
  color: white;
}
/deep/.meta {
  display: flex;
}
/deep/.avatar {
  display: none;
}
/deep/.author {
  color: black;
  opacity: 0.4;
  font-size: 14px;
  flex: 1;
}
/deep/.author::before {
  content: "作者 / ";
}
/deep/.bio {
  display: none;
}
/deep/.img-place-holder {
  display: none;
}
/deep/.originUrl {
  display: block;
  margin-right: 1rem;
  font-size: 14px;
  color: #1989fab3;
}
/deep/.view-more a {
  height: 40px;
  line-height: 40px;
  border-radius: 1rem;
  color: white;
  background: #1989fab3;
}
.bottom {
  width: 100%;
  height: 50px;
  position: sticky;
  background: white;
  bottom: 0;
  display: flex;
}
.bottom div {
  flex: 1;
  text-align: center;
}
.left-arrow {
  border-right: 1px solid #ddd;
}
.bottom div {
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .van-info{
  background: white;
  z-index: -1;
  color: black;
}
/deep/.van-share-sheet__header{
  display: none;
}
/deep/.van-share-sheet__cancel{
  display: none;
}
.translate{
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 50px;
  right: 15px;
  text-align: center;
  vertical-align: middle;
}
</style>
